<template>
	<view class="container">
		<image src="../../static/top.jpg" mode="aspectFill" style="width: 100%;height: 400rpx;"></image>
		<view class="con">
			<view class="text-t">单程</view>

			<view class="box">
				<view class="box-l" @click="openGoPopup(true)">
					<view class="box-text">出发</view>
					<view class="box-pick">
						<view>{{selectGoPlace?selectGoPlace:`选择港口`}}</view>
					</view>
				</view>
				<view class="box-m" @click="changePlace">
					<image src="../../static/c.png" mode="aspectFill" style="width: 42px;height: 42px;"></image>
				</view>
				<view class="box-r" @click="openDestPopup(false)">
					<view class="box-text r-text">到达</view>
					<view class="box-pick">
						<view style="text-align: right;">{{selectDestPlace?selectDestPlace:`选择港口`}}</view>
					</view>
				</view>
			</view>
			
			<view class="car-type-list">
				<view class="car-item" :class="{'disabled':1==0,'on':0 == 0}"><view>普通车辆</view></view><view class="car-item" :class="{'disabled':0==0,'on':1 == 0}"><view>普通车辆</view></view><view class="car-item"><view>普通车辆</view></view><view class="car-item"><view>普通车辆</view></view>
			</view>

			<view class="away-pay-btn">
				<view class="btn" :class="{disabled:status==false}" @click="nextStep">立即购票</view>
			</view>

			<uni-popup ref="gPopup" background-color="#fff">
				<uni-card padding="20px">
					<view style="position: absolute;right: 20rpx;top: 20rpx;" @click="closeGoPopup"><uni-icons
							type="close" size="24"></uni-icons></view>
					<view style="text-align: center;font-size: 40rpx;font-weight: bold;margin-bottom: 40rpx;">出发港口
					</view>
					<view v-for="item in goPlaceList">
						<button style="width: 500rpx;margin-bottom: 30rpx;" type="default"
							@click="selectGoPopup(item)">{{item}}</button>
					</view>
				</uni-card>
			</uni-popup>

			<uni-popup ref="dPopup" background-color="#fff">
				<uni-card padding="20px">
					<view style="position: absolute;right: 20rpx;top: 20rpx;" @click="closeDestPopup"><uni-icons
							type="close" size="24"></uni-icons></view>
					<view style="text-align: center;font-size: 40rpx;font-weight: bold;margin-bottom: 40rpx;">目的港口
					</view>
					<view v-for="item in destPlaceList">
						<button style="width: 500rpx;margin-bottom: 30rpx;" type="default"
							@click="selectDestPopup(item)">{{item}}</button>
					</view>
				</uni-card>
			</uni-popup>
		</view>

		<st-customize-footer></st-customize-footer>
	</view>
</template>

<script>
	import {
		toPath
	} from "@/utils/toPath.js"
	import stCustomizeFooter from "@/components/st-customize-footer.vue"
	import {
		format
	} from 'util';
	import {
		formatDate
	} from "tough-cookie";
	export default {
		components: {
			stCustomizeFooter
		},
		data() {
			return {
				status: false,
				id:0,
				suit_id: 0,				
				goPlaceList: '',
				destPlaceList: '',
				selectGoPlace: '',
				selectDestPlace: ''	
			}
		},
		
		onLoad(options) {
			// 请求参数统一管理
			options = this.$optionsManager(options);
			uni.removeStorageSync('order_booking_basedata')
			uni.removeStorageSync('order_place_booking')
			uni.removeStorageSync('order_Airlines_booking')

			this.selectGoPlace = this.goPlaceList[0]
			this.selectDestPlace = this.destPlaceList[1]
		},
		methods: {				
			checkStatus() {
				if (this.selectGoPlace == '山咀' && this.selectDestPlace == '上川') {
					this.id = 1
				} else if (this.selectGoPlace == '山咀' && this.selectDestPlace == '下川') {
					this.id = 2
				} else if (this.selectGoPlace == '上川' && this.selectDestPlace == '山咀') {
					this.id = 3
				} else if (this.selectGoPlace == '下川' && this.selectDestPlace == '山咀') {
					this.id = 4
				} 
				if (this.selectGoPlace && this.selectDestPlace) {
					this.status = true
				} else {
					this.status = false
				}
				this.changeText()
			},			
			nextStep() {
				if (!this.status) {
					return
				}


				let location = {
					suit_id: this.suit_id,
					startPlace: this.selectGoPlace,
					destPlace: this.selectDestPlace,
					useDate: this.useDate,
					baocar: this.baocar,
					goLat: this.goLat,
					goLon: this.goLon,
					goAddress: this.goAddress,
					goPlace: this.goPlace,
					getLat: this.getLat,
					getLon: this.getLon,
					getAddress: this.getAddress,
					getPlace: this.getPlace,
					goStation: this.goStation,
					getStation: this.getStation
				}

				uni.setStorageSync('order_place_booking', location);
				toPath('/pages/index/oneTicketOrder', this, true);
			},			
			selectGoPopup(item) {
				this.selectGoPlace = item
				this.selectDestPlace = ''
				this.goPlaceList = []
				this.destPlaceList = []
				this.$refs.gPopup.close()
				this.checkStatus()
			},
			openGoPopup() {
				this.goPlaceList = ["山咀", "上川", "下川"]

				this.$refs.gPopup.open('top')
			},
			closeGoPopup() {
				this.$refs.gPopup.close()
			},
			selectDestPopup(item) {
				this.selectDestPlace = item
				this.$refs.dPopup.close()
				this.checkStatus()
			},
			openDestPopup() {
				switch (this.selectGoPlace) {
					case '山咀':
						this.destPlaceList = ["上川", "下川"]
						break
					case '上川':
						this.destPlaceList = ["山咀"]
						break
					case '下川':
						this.destPlaceList = ["山咀"]
						break
				}
				this.$refs.dPopup.open('top')
			},
			closeDestPopup() {
				this.$refs.dPopup.close()
			}
		}
	}
</script>

<style lang="scss">
	uni-page-body {
		display: inline;
	}

	.container {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.map {
		width: 100%;
	}

	.con {
		width: 80%;
		height: 1000rpx;
		padding: 40rpx 60rpx;
		background-color: #fff;
		position: absolute;
		border-radius: 30rpx;
		top: 150rpx;
		left: 0;
		right: 0;		
		margin: auto;
	}

	.car-type-list{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		.car-item{	
			margin-bottom: 30rpx;
			border-radius: 10rpx;
			width: 48%;
			height: 100rpx;			
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			&.on{
				background-color: $uni-bg-color-primary;
				border-color: #2dbb55;
				color: $uni-text-color-inverse;				
			}
			&.disabled{
				background-color: #f6f6f6;
				border-color: #f6f6f6;
				color: #9e9e9e;
			}
		}
	}
	.box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 80rpx;
		.box-l {
			display: flex;
			flex-direction: column;
			width: 200rpx;
		}

		.box-m {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.box-r {
			display: flex;
			flex-direction: column;
			width: 200rpx;
		}

		.r-text {
			text-align: end;
		}

		.box-text {
			font-size: 28rpx;
			color: #c2c2c2;
		}

		.box-pick {
			margin-top: 20rpx;
			font-size: 36rpx;
			color: #000;
			font-weight: bold;
		}
	}

	

	.away-pay-btn {
		@extend .justifyspacec;
		height: 124rpx;
		padding: 0 25rpx;
		font-size: $uni-font-size-sm;

		.left {
			@extend .displayflex;
		}

		.price {
			color: $uni-text-color-price;
		}

		.symbol {
			font-size: $uni-font-size-mini;
		}

		.number {
			font-size: $uni-font-size-base;
			font-weight: bold;
		}

		.order-detail {
			margin-left: 22rpx;
			color: $uni-color-primary;

			.iconfont {
				position: relative;
				top: 2rpx;
				margin-left: 8rpx;
				transition: .3s;
			}

			&.on {
				.iconfont {
					transform: rotate(180deg);
				}
			}
		}

		.btn {
			@extend .alignJustify;
			width: 100%;
			height: 88rpx;
			font-size: 32rpx;
			border-radius: 20rpx;
			background-color: #1296db;
			color: $uni-text-color-inverse;

			&.disabled {
				background-color: #d0d0d0;
			}
		}
	}

	.agreement-info {
		@extend .displayflex;
		padding: 0 30rpx 14rpx;
		text-align: center;
		margin-top: 40rpx;

		.iconfont {
			margin: 6rpx 0rpx 0 60rpx;
			color: #a4a3aa;

			&.on {
				color: $uni-color-success;
			}
		}

		.content {
			@extend .flex1;
			width: 500rpx;
			line-height: 1.667;
			font-size: $uni-font-size-sm;
		}

		.info-link {
			color: $uni-color-success;
		}
	}

	.text-t {
		width: 80rpx;
		font-size: 38rpx;
		text-align: center;
		margin: 40rpx auto;
		font-weight: bold;
		padding: 0 10rpx;
		border-bottom: 10rpx solid #fa5b34;
	}

	.text-b {
		color: #fa5b34;
		font-size: 30rpx;
		margin: 40rpx 0;
		font-weight: bold;
	}
</style>